<template>
	<view>
		<uni-popup ref="vipcon" zindex type="bottom" @maskClick="maskClick" :safeArea="false">
			<view class="comBotBx p_rlt" @touchmove.stop.prevent="">
				<view class="text-xll text-bold padding-left padding-top">{{'VIP专区券'}}</view>
				<view class="tabs_box" v-if="false">
					<!-- <tabs ref="navref" :list="navList" :current="navClass" marright="5rpx" activeWeight='400'
						@tabItemClick="tabSelect" fontSize="32rpx" activeColor="#000" activeBarColor="#53A87F"
						barMargin="10"></tabs> -->
				</view>
				<view class="flex align-center padding-top padding-bottom-sm text-sm text-c9 text-center padding-lr-sm">
					<view class="flex-sub">
						面额
					</view>
					<view class="flex-twice">
						有效截止时间
					</view>
					<view class="flex-twice text-left padding-left-xl">
						可用渠道
					</view>
					<view class="flex-sub">
						使用规则
					</view>
				</view>
				<scroll-view scroll-y="true" class="sleScr">
					<view class="padding-lr-sm p_rlt scrmbx">
						<empty positions="absolute" :empty="loaded&&list.length<=0" :zIndexs="100" :imgUrl="'https://cdn-static.yekjx.com/'+'food/empty/images/empty_ico04.png'" content="暂无数据"></empty>
						<block v-for="(item,index) in list" :key="index">
							<view class="scrItem">
								<view class="flex align-center minhbx">
									<view class="flex-sub padding-left-sm">
										<text class="text-bold">{{item.money}}</text>元
									</view>
									<view class="flex-twice text-center">
										{{item.endTime}}
									</view>
									<view class="flex-twice text-c9 padding-left-xl text-fontsize  ">
										 {{ item.scope_channel_label||'' }}
									</view>
									<view class="flex-sub text-c6 padding-right text-end padding-tb-xs point"
										@click="item.show=!item.show">
										<text :class="item.show?'cuIcon-fold':'cuIcon-unfold'"></text>
									</view>
								</view>
								<view class="text-sm text-c9">
									<uni-transition :mode-class="'fade'" :show="item.show">
										<view class="padding-left-sm padding-right padding-bottom-sm">
											{{item.vdesc||''}}
										</view>
									</uni-transition>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>

			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineEmits } from 'vue';
	// import tabs from '@/components/comtabs/comtabs.vue'
	import { cred_list } from '@/api/vmeitime-http/index.js';
	import { useShopStore } from '@/stores/shopStore';
	const shopStore = useShopStore();
	const emit = defineEmits(["maskClick"])
	const vipcon = ref()
	// const navref = ref()
	// const navList = ref([{
	// 	statu: '1',
	// 	name: "可用"
	// }, {
	// 	statu: '0',
	// 	name: "不可用"
	// }])
	// const navClass = ref(0)

	// const props = defineProps({
	//   // type: {
	//   //   type: String,
	//   //   default: "default",
	//   // },
	// 	data: {
	// 	  type: Object,
	// 	  default: () => {
	// 	    return [];
	// 	  },
	// 	}
	// });
	// const list = computed(() => {
	// 	let r = props.data&&props.data.sList?props.data.sList.filter((item:any)=>item.statu==navList.value[navClass.value].statu):{}
	// 	// console.log('list',r)
	//   return r;
	// })
	// const tabSelect = (item : any, index : any = 0) => {
	// 	navClass.value = index
	// }

	// const orSource = ref('')
	// const modeRuleClass = ref('fade')
	const list = ref([])
	const loaded = ref(false)
	const open = async (money?:any) => {
		if(!money){
			return
		}
		try{
			
			let res = await cred_list({ channelNo: '1114', faceMoney: money,smid:shopStore.curSellerMemberId });
			loaded.value = true;
			if (res.result) {
				list.value = res.object.map((item) => {
					return {
						money: item.coupon_money,
						endTime: item.end_date?item.end_date.split(" ")[0] || '':'',
						show: false,
						vdesc: item.vdesc,
						scope_channel_label: item.scope_channel_label,
					}
				})
				vipcon.value.open()
				// navClass.value = 0
				// orSource.value = source
				// navref.value.init()
			}
		}catch(e){
			console.error(e)
			loaded.value = true;
		}
		
	}
	const close = () => {
		vipcon.value.close()
	}

	const maskClick = (e : any) => {
		// console.log('car-maskClick',e);
		emit("maskClick")
	}
	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	.comBotBx {
    height: 900rpx;
		padding-bottom: 180rpx;
	}
  .text-fontsize{
    color: #999;
    font-family: "Microsoft YaHei UI";
    font-size: 26rpx;
    font-weight: 400;
  }
	.botbox {
		@include baseab(100%, 130rpx);
		left: 0;
		bottom: 0;
		z-index: 1;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
		padding-right: 60rpx;
	}

	.sleScr {
		min-height: 300rpx;
		max-height: 60vh;
	}
	.scrmbx{
		min-height: 300rpx;
    // padding-bottom: 160rpx;
    margin-bottom: 400rpx;
	}
	.minhbx {
		// height: 72rpx;
    padding:10rpx 0;
	}

	.scrItem {
		min-height: 72rpx;
		overflow: hidden;
		background: rgba(246, 247, 249, 0.7);

		&:nth-child(2n) {
			background: #fff;
		}
	}

	.tabs_box {
		width: 100%;
		min-height: 45rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
	}
</style>